<template>
  <div>
    <!-- 标题部分 -->
    <div class="headtitle">
      <van-nav-bar
        title="购物车"
        left-text="返回"
        right-text="删除"
        left-arrow
        fixed
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>

    <!-- 购物车列表 -->
    <div class="gooddetails">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div>
          <span class="merchantssname">商家名称:嵇家水果超市1</span>
          <div class="goods">
            <!-- 复选框按钮 -->
            <van-checkbox name="a"></van-checkbox>
            <!-- 选定到购物车的商品 -->
            <van-swipe-cell>
              <van-card
                num="2"
                price="30.00"
                desc="描述信息"
                origin-price="50.00"
                title="鲜丰，红色柚子一个，约1.8-2.2斤"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <!-- 计数器 -->
              <van-stepper v-model="value" />
              <!-- 删除按钮 -->
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </div>
          <div class="goods">
            <!-- 复选框按钮 -->
            <van-checkbox name="b"></van-checkbox>
            <!-- 选定到购物车的商品 -->
            <van-swipe-cell>
              <van-card
                num="2"
                price="30.00"
                desc="描述信息"
                origin-price="50.00"
                title="鲜丰，红色柚子一个，约1.8-2.2斤"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <!-- 计数器 -->
              <van-stepper v-model="value" />
              <!-- 删除按钮 -->
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </div>
          <div class="goods">
            <!-- 复选框按钮 -->
            <van-checkbox name="c"></van-checkbox>
            <!-- 选定到购物车的商品 -->
            <van-swipe-cell>
              <van-card
                num="2"
                price="30.00"
                desc="描述信息"
                origin-price="50.00"
                title="鲜丰，红色柚子一个，约1.8-2.2斤"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <!-- 计数器 -->
              <van-stepper v-model="value" />
              <!-- 删除按钮 -->
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </van-checkbox-group>
      <div class="guess">--猜你喜欢--</div>
      <div class="recommended">
        <div>
          <img src="../assets/zao.webp" alt="" width="160" />
          <span>新疆大枣 </span><br />
          <div class="price">
            <span>价格:￥18/公斤</span>
            <van-icon name="cart-circle-o" size="30" />
          </div>
        </div>
        <div>
          <img src="../assets/zao.webp" alt="" width="160" />
          <span>新疆大枣 </span><br />
          <div class="price">
            <span>价格:￥18/公斤</span>
            <van-icon name="cart-circle-o" size="30" />
          </div>
        </div>
        <div>
          <img src="../assets/zao.webp" alt="" width="160" />
          <span>新疆大枣 </span><br />
          <div class="price">
            <span>价格:￥18/公斤</span>
            <van-icon name="cart-circle-o" size="30" />
          </div>
        </div>
        <div>
          <img src="../assets/zao.webp" alt="" width="160" />
          <span>新疆大枣 </span><br />
          <div class="price">
            <span>价格:￥18/公斤</span>
            <van-icon name="cart-circle-o" size="30" />
          </div>
        </div>
      </div>

      <!-- 结算部分 -->
      <div class="settlement">
        <van-button @click="checkAll">全选</van-button>
        <span>合计:{{ 30 * value }}元 </span>
        <div>
          <van-button type="warning">去结算</van-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      result: [],
    };
  },
  methods: {
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    // 点击后返回首页
    onClickLeft(){
      window.location.href="/"
    },
    // 点击后删除选中的购物车列表
    onClickRight(){
      // 思路：将选中的商品添加到一个新建的对象中，当在购物车选中时获取编号id,如果删除则在数组查找删除信息
    }
  },
};
</script>

<style lang="css" scoped>
/* 中间商品列表 */
.gooddetails {
  width: 100%;
  /* background-color: rgb(194, 71, 71); */
  /* height: 110px; */
  margin-bottom: 40px;
  margin-top: 50px;
}
.van-checkbox {
  margin-left: 20px;
  /* opacity: 0.5; */
}
.van-swipe-cell{
  width: 325px;
}
.goods {
  display: flex;

}
.merchantssname {
  display: block;
  margin: 10px 0 0 10px;
  color: rgb(221, 95, 36);
}
.goods-card {
  margin: 0;
  background-color: white;
}
/* 删除按钮 */
.delete-button {
  height: 100%;
}
/* 计数器 */
.van-stepper {
  position: absolute;
  right: 12px;
  top: 70px;
}
/* 猜你喜欢 */
.guess {
  color: white;
  text-align: center;
  font-size: 20px;
  background-color: rgb(221, 95, 36);
  border-radius: 12px;
  margin: 0 10px;
}
/* 推荐商品 */
.recommended {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
}
.recommended > div {
  width: 165px;
  margin: 10px;
}
.recommended div > img {
  border-radius: 50%;
  /* margin: auto; */
  margin-left: 2px;
}
.recommended div > .price {
  display: flex;
  justify-content: space-between;
}
/* 底部nav */
.settlement {
  width: 100%;
  background-color: rgb(254, 255, 255);
  height: 45px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
}
.settlement > span {
  line-height: 45px;
  font-size: 16px;
  color: #ff976a;
}
.van-button--warning,
.van-button--default {
  top: 10px;
  border-radius: 25px;
  height: 30px;
  width: 90px;
  padding: 0;
}

.van-button--default {
  background-color: #ff976a;
  color: white;
}
</style>